<template>
  <div
    class="min-h-screen flex flex-col bg-gradient-to-br from-gray-900 to-blue-900"
  >
    <!-- Three.js 背景 -->
    <div ref="threeContainer" class="absolute inset-0"></div>

    <!-- 登录表单 -->
    <div class="flex-1 flex items-center justify-center p-4 relative z-10">
      <div class="w-full max-w-md">
        <!-- Logo -->
        <div class="text-center mb-8">
          <h1 class="text-4xl font-bold text-white mb-2">BBBMap</h1>
          <p class="text-blue-200">WebGIS 智能地图平台</p>
        </div>

        <!-- 登录卡片 -->
        <div
          class="bg-white/10 backdrop-blur-lg rounded-lg shadow-xl p-8 transform transition-all duration-500 hover:scale-105"
        >
          <h2 class="text-2xl font-bold mb-6 text-center text-white">登录</h2>
          <form @submit.prevent="handleLogin" class="space-y-6">
            <div class="space-y-2">
              <label
                class="block text-sm font-medium text-blue-200"
                for="username"
              >
                用户名
              </label>
              <div class="relative">
                <input
                  id="username"
                  v-model="username"
                  type="text"
                  class="w-full px-4 py-3 bg-white/5 border border-blue-300/30 rounded-lg text-white placeholder-blue-200/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                  placeholder="请输入用户名"
                />
                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg
                    class="h-5 w-5 text-blue-200"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <div class="space-y-2">
              <label
                class="block text-sm font-medium text-blue-200"
                for="password"
              >
                密码
              </label>
              <div class="relative">
                <input
                  id="password"
                  v-model="password"
                  type="password"
                  class="w-full px-4 py-3 bg-white/5 border border-blue-300/30 rounded-lg text-white placeholder-blue-200/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                  placeholder="请输入密码"
                />
                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                  <svg
                    class="h-5 w-5 text-blue-200"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                    />
                  </svg>
                </div>
              </div>
            </div>

            <!-- 验证码 -->
            <div class="space-y-2">
              <label
                class="block text-sm font-medium text-blue-200"
                for="captcha"
              >
                验证码
              </label>
              <div class="flex space-x-2">
                <input
                  id="captcha"
                  v-model="captcha"
                  type="text"
                  class="flex-1 px-4 py-3 bg-white/5 border border-blue-300/30 rounded-lg text-white placeholder-blue-200/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"
                  placeholder="请输入验证码"
                />
                <div
                  class="w-32 h-12 bg-white/10 rounded-lg flex items-center justify-center cursor-pointer select-none"
                  @click="refreshCaptcha"
                >
                  <span class="text-xl font-mono text-white">{{
                    captchaText
                  }}</span>
                </div>
              </div>
            </div>

            <div>
              <button
                type="submit"
                class="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
              >
                登录
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import Footer from "../components/Footer.vue";
import * as THREE from "three";

const router = useRouter();
const username = ref("");
const password = ref("");
const captcha = ref("");
const captchaText = ref("");
const threeContainer = ref(null);

// Three.js 相关变量
let scene, camera, renderer, particles;

// 生成验证码
const generateCaptcha = () => {
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  let result = "";
  for (let i = 0; i < 4; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
};

// 刷新验证码
const refreshCaptcha = () => {
  captchaText.value = generateCaptcha();
  captcha.value = "";
};

// 初始化Three.js场景
const initThree = () => {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  renderer = new THREE.WebGLRenderer({ alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  threeContainer.value.appendChild(renderer.domElement);

  // 创建粒子
  const geometry = new THREE.BufferGeometry();
  const vertices = [];
  for (let i = 0; i < 1000; i++) {
    vertices.push(
      Math.random() * 2000 - 1000,
      Math.random() * 2000 - 1000,
      Math.random() * 2000 - 1000
    );
  }
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );

  const material = new THREE.PointsMaterial({
    color: 0x4a90e2,
    size: 2,
    transparent: true,
    opacity: 0.5,
  });

  particles = new THREE.Points(geometry, material);
  scene.add(particles);

  camera.position.z = 1000;

  // 动画循环
  const animate = () => {
    requestAnimationFrame(animate);
    particles.rotation.x += 0.0005;
    particles.rotation.y += 0.0005;
    renderer.render(scene, camera);
  };
  animate();

  // 窗口大小调整
  window.addEventListener("resize", onWindowResize);
};

// 窗口大小调整处理
const onWindowResize = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};

// 登录处理
const handleLogin = () => {
  if (captcha.value.toUpperCase() !== captchaText.value) {
    alert("验证码错误");
    return;
  }
  // 这里添加登录逻辑
  console.log("登录信息:", {
    username: username.value,
    password: password.value,
  });
  // 登录成功后跳转到地图页面
  router.push("/map");
};

onMounted(() => {
  initThree();
  refreshCaptcha();
});

onUnmounted(() => {
  window.removeEventListener("resize", onWindowResize);
  if (renderer) {
    renderer.dispose();
  }
});
</script>

<style scoped>
/* 确保Three.js画布在背景层 */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
</style> 